.wrap-product {
    .title-in {
        p {
            max-width: 700px;
        }
    }

    .product{
        margin-top: 70px;
        @media(max-width: 991px){
            margin-top: 40px;
        }
        ul{
            li{
                background-color: #f4f4f4;
                overflow: hidden;
                .pic{
                    width: 50%;
                    float: left;
                    @media(max-width: 640px){
                        width: 100%;
                    }
                    .img-box{
                        padding-bottom: 800/1220*100%;
                        img{
                            .transition(transform,1.2s);
                        }
                    }
                }
                .text{
                    width: 50%;
                    float: right;
                    padding: 60px 70px 60px 50px;
                    @media(max-width: 1199px){
                        padding: 40px;
                    }
                    @media(max-width: 991px){
                        padding: 30px 20px;
                    }
                    @media(max-width: 640px){
                        width: 100%;
                    }
                    h3{
                        font-size:20px;
                        font-weight: 900;
                        .transition(all,0.2s);
                        margin-top: 0;
                        margin-bottom: 8px;
                        line-height: 24/20;
                    }
                    span{
                        color: @color;
                        display: block;
                        margin-bottom: 30px;
                        @media(max-width: 991px){
                            margin-bottom: 14px;
                        }
                    }
                    p{
                        font-size: 15px;
                        line-height: 24/15;
                        color: @c6;
                        font-weight: 500;
                        margin: 0;
                        .t-line(4);
                    }
                    a{
                        display: block;
                    }
                    a.more{
                        display: inline-block;
                        height: 32px;
                        background-color: @color;
                        color: @cf;
                        line-height: 32px;
                        padding: 0 30px;
                        .radius(2px);
                        margin-top: 30px;
                        @media(max-width: 991px){
                            margin-top: 14px;
                        }
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
                &:nth-child(2n){
                    background-color: @cf;
                    .pic{
                        float: right;

                    }
                    .text{
                        padding: 60px 50px 60px 70px;
                        @media(max-width: 1199px){
                            padding: 40px;
                        }
                        @media(max-width: 991px){
                        padding: 30px 20px;
                    }
                    }
                }
                &:hover{
                    .pic{
                        .img-box img{
                            .scale(1.1);
                        }
                    }
                    .text{
                        h3{
                            color: @color;
                        }
                    }
                }
            }
        }
    }
}
